<template>
    <!-- pages/userInfo/editLabel/editLabel.wxml -->
    <view class="markcon">
        <view class="part1">
            <block v-for="(item, index) in labels" :key="index">
                <text :data-id="item.id" @tap="delLabel" class="mark selected">{{ item.name }}</text>
            </block>
            <text class="mark">选择或搜索标签</text>
        </view>
        <view>
            <view class="marktitle">
                <text class="markhead">全部标签</text>
                <text class="marktips" @tap="labelManager">编辑 ></text>
            </view>
            <view class="marklist">
                <block v-for="(item, index) in list" :key="index">
                    <text :data-id="item.id" @tap="selectLabel" :class="'mark ' + (labelStatus[item.id] ? 'selected' : '')">{{ item.name }}</text>
                </block>
            </view>
            <button @tap="save" class="tjbtn" type="primary">保存</button>
        </view>
    </view>
</template>

<script>
// pages/userInfo/editLabel/editLabel.js
import api from '../../../utils/api';
const app = getApp();
export default {
    data() {
        return {
            friendId: '',
            labels: [],
            list: [],
            labelStatus: {} //标签选中状态
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        var friendId = options.friendId;
        this.setData({
            friendId: friendId
        });
        console.log(friendId);
        this.loadData();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        loadData() {
            var that = this;
            var userLabelList = uni.getStorageSync('userLabelList') || [];
            uni.removeStorage({
                key: 'userLabelList'
            });
            let labelStatus = {};
            userLabelList.forEach((item) => {
                labelStatus[item.id] = true;
            });
            this.setData({
                labels: userLabelList,
                labelStatus: labelStatus
            });
            console.log(this.labels);
            console.log(this.labelStatus);
            api.get('/rest/api/queryMyLabel', {
                page: 1,
                pageSize: 1000
            })
                .then((res) => {
                    console.log(res);

                    if (res.data.length != 0) {
                        that.setData({
                            list: res.data
                        });
                    }
                })
                .catch((error) => {
                    app.globalData.errorTip(error.msg || '未知异常');
                });
        },

        delLabel(e) {
            var id = e.currentTarget.dataset['id'];
            var key = 'labelStatus[' + id + ']';
            this.labelStatus[id] = false;
            this.removeLabel(id);
        },

        selectLabel(e) {
            var id = e.currentTarget.dataset['id'];
            var key = 'labelStatus[' + id + ']';
            var checked = true;

            if (this.labelStatus[id] == true) {
                //如果选中状态，则取消选中
                checked = false;
                this.removeLabel(id);
            } else {
                //如果未选中状态，则进行选中
                checked = true;
                this.addLabel(id);
            }

            this.labelStatus[id] = checked;
        },

        addLabel(id) {
            var that = this;
            let labels = that.labels;
            var addObj = undefined;
            this.list.some((item) => {
                if (item.id == id) {
                    addObj = item;
                    return true;
                }
            });

            if (addObj) {
                that.setData({
                    labels: labels.concat(addObj)
                });
            }
        },

        removeLabel(id) {
            var that = this;
            var delIndex = -1;
            let myLabels = this.labels;
            myLabels.some((item, index) => {
                if (item.id == id) {
                    delIndex = index;
                    return true;
                }
            });

            if (delIndex >= 0) {
                myLabels.splice(delIndex, 1);
                that.setData({
                    labels: myLabels
                });
            }
        },

        save() {
            var that = this;
            var labels = this.labels;
            console.log(labels);
            var labelIds = [];
            labels.forEach((item) => {
                labelIds.push(item.id);
            });
            uni.showLoading({
                title: '保存中...'
            });
            api.post('/rest/api/updateFriendInfo', {
                friendId: that.friendId,
                labelIds: labelIds.join(',')
            })
                .then((res) => {
                    console.log(res);
                    uni.hideLoading();
                    app.globalData.successTip('保存成功');
                    setTimeout(() => {
                        uni.navigateBack();
                    }, 1000);
                })
                .catch((err) => {
                    uni.hideLoading();
                });
        },

        labelManager() {
            uni.navigateTo({
                url: '/pages/labelManage/labelManage'
            });
        }
    }
};
</script>
<style>
/* pages/userInfo/editLabel/editLabel.wxss */
page {
    background: #ededed;
}
.mark {
    background: rgb(255, 255, 255);
    border-radius: 100rpx;
    display: inline;
    padding: 10rpx 30rpx;
    float: left;
    font-size: 28rpx;
    margin: 10rpx 10rpx 10rpx 0;
    color: #a9a9a9;
    border: 1px solid #ffffff;
}
.mark.selected {
    background: #f6f9ff;
    color: #3873f6;
    border: 1px solid #3873f6;
}
.part1 {
    padding: 20rpx 20rpx;
    background-color: #fff;
    overflow: hidden;
}
.tips {
    color: #999;
    font-size: 28rpx;
    line-height: 84rpx;
    padding-left: 20rpx;
}
.marklist {
    padding: 20rpx;
    overflow: hidden;
}
.marktitle {
    padding: 20rpx;
    padding-bottom: 0;
    overflow: hidden;
}
.markhead {
    float: left;
    color: #999;
    font-size: 28rpx;
}
.marktips {
    float: right;
    color: #afafaf;
    font-size: 28rpx;
}
.tjbtn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    line-height: 88rpx;
    background-color: #3873f6 !important;
    border-radius: 0;
}
</style>
